<template>
	<view class="home-container">
		<u-navbar @leftClick="leftClick" @rightClick="rightClick" placeholder :safeAreaInsetTop="true" title="测流断面"
			:fixed="true" leftIcon="arrow-left" rightIcon="plus" :titleStyle="{fontSize: '36rpx', fontWeight: '600'}"
			:border="false">
		</u-navbar>

		<view class="content-container">
			<!-- 空状态 -->
			<view class="empty-state" v-if="cezhanlist.length == 0">
				<image src="/static/empty-list.png" mode="aspectFit" class="empty-image"></image>
				<view class="empty-text">暂无测流断面</view>
				<view class="empty-subtext">点击右上角添加按钮创建新的测流断面</view>
				<u-button @click="rightClick" shape="circle" color="#007AFF" text="添加测流断面" class="empty-button">
				</u-button>
			</view>

			<!-- 断面列表 -->
			<view class="card-list" v-else>
				<view class="card-item" v-for="(item, index) in cezhanlist" :key="index" @click="urlCezhan(item)"
					@longpress="cezhancliFn(item.id)">
					<view class="card-header">
						<text class="card-title">{{item.name}}</text>
						<text class="card-bbooe" v-if="item.doppler == 1">德希</text>
						<text class="card-bbooe" v-if="item.doppler == 2">大禹</text>
						<text class="card-bbooe" v-if="item.doppler == 3">睿鑫</text>
					</view>

					<view class="card-details">
						<view class="detail-item">
							<text class="detail-value">{{item.qudikuandu}}</text>
							<text class="detail-label">测段底宽(m)</text>
						</view>

						<view class="divider"></view>

						<view class="detail-item">
							<text class="detail-value">{{item.cexiantiaoshu}}</text>
							<text class="detail-label">测线条数</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<u-modal :show="showmodal" :title="titlemodal" showCancelButton confirmColor="#FF3B30" @confirm="confirmFn"
			@cancel="cancelFn">
			<view class="modal-content">
				确定要删除这个测流断面吗？此操作不可撤销。
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titlemodal: '删除确认',
				showmodal: false,
				cezhanlist: [],
				toolName: '',
				itemObj: {},
				cezhanID: '',
				currentMeterType: null,
			}
		},
		onShow() {
			this.cezhanlist = this.vuex_saveCezhandata || [];
		},
		onLoad(option) {

		},
		methods: {
			// 返回
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 添加
			rightClick() {
				let ran01 = new Date().getTime()
				uni.navigateTo({
					url: '/pages/index/increaseAdd?&id=' + ran01
				});
			},
			// 跳转
			urlCezhan(item) {
				console.log('item',item);
				uni.$u.vuex('vuex_cezhanInfo', item)
				uni.navigateTo({
					url: '/pages/index/duopuleCounter?doppler=' + item.doppler
				});
			},
			// 长按触发删除
			cezhancliFn(id) {
				this.cezhanID = id;
				this.showmodal = true;
			},

			// 确认删除
			confirmFn() {
				this.deleteCezhan();
				this.showmodal = false;
			},
			cancelFn() {
				this.showmodal = false;
			},

			// 执行删除操作
			deleteCezhan() {
				// 统一操作 vuex 中的数据
				const currentList = this.vuex_saveCezhandata || [];
				const index = currentList.findIndex(item => item.id === this.cezhanID);

				if (index !== -1) {
					// 创建新数组
					const newList = [...currentList];
					newList.splice(index, 1);

					// 更新数据
					uni.$u.vuex('vuex_saveCezhandata', newList);
					this.cezhanlist = newList; // 保持同步

					uni.showToast({
						title: '已删除',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '删除失败，未找到对应项',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		background-color: #f2f2f7;
	}

	.content-container {
		padding: 24rpx;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;
		text-align: center;
		margin-top: 120rpx;

		.empty-image {
			width: 400rpx;
			height: 400rpx;
			opacity: 0.6;
			margin-bottom: 48rpx;
		}

		.empty-text {
			font-size: 36rpx;
			font-weight: 600;
			color: #000;
			margin-bottom: 16rpx;
		}

		.empty-subtext {
			font-size: 32rpx;
			color: #8E8E93;
			margin-bottom: 48rpx;
		}

		.empty-button {
			width: 400rpx;
			height: 88rpx;
			font-size: 32rpx;
		}
	}

	/* 卡片列表样式 */
	.card-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.card-item {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 10rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.card-title {
				font-size: 34rpx;
				font-weight: 600;
				color: #000;
			}

			.card-bbooe {
				font-size: 35rpx;
				color: #55aa7f;
			}
		}

		.card-details {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.detail-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.detail-value {
					font-size: 55rpx;
					font-weight: 600;
					color: #007AFF;
					margin-bottom: 8rpx;
				}

				.detail-label {
					font-size: 30rpx;
					color: #8E8E93;
				}
			}

			.divider {
				width: 2rpx;
				height: 80rpx;
				background-color: #e5e5ea;
			}
		}
	}

	/* 弹窗内容样式 */
	.modal-content {
		padding: 24rpx;
		font-size: 32rpx;
		color: #3c3c43;
		text-align: center;
	}
</style>
<style>
	page {
		background-color: #f2f2f7;
	}
</style>